<template>
<div>
    <flexbox orient="vertical">

    <flexbox-item v-for="(pl, index) in pllist" :key="index">
    <div class="flex-demo">
    <div class="namebox">
    <div class="namemsg">
    <img class="touxiang" :src="pl.Pl_tx" alt="">
    <div class="Tname">
    <span class="name">{{pl.Pl_username}}</span>
    <span class="time">{{pl.Pl_time}}</span>  
    </div>  
    </div>
    </div>
    <p class="Title"><span v-if="pl.Pl_touser">回复&nbsp;{{pl.Pl_touser}}：&nbsp;</span>{{pl.Pl_text}}</p>

    <router-link :to="'/Postdetails/' + id +'/'+ pl.Tz_id" class="rline">
    <div class="M_pltz">
      <img v-if="pl.Tz_img!=null" :src="'http://localhost:3000/' + pl.Tz_img" alt="" width="70">
      <div class="M_pltext">
      <span class="M_pltitle">{{pl.Tz_text}}</span>
      <span class="M_pltype">#{{pl.Tz_type}}</span> 
      </div>
    </div>
    </router-link>
    </div>
    </flexbox-item>



    </flexbox>
    <br><br><br>
  </div>
</template>
<script>
import { TransferDom } from 'vux'
export default {
    directives: {
    TransferDom
    },
  data () {
    return {
      pllist:[],
      id:this.$store.state.wd.wdid, 
    }
  },
  props:{
      pid:String
    },
  methods: {
    getpl(){
          var that = this;
          this.$http.get("http://localhost:3000/pl/Userpl/" + this.pid)
          .then(
          (response)=>{
              that.pllist=response.data.msg.pls;
              for (let i = 0; i < that.pllist.length; i++) {
                var tid = that.pllist[i].Tz_id;
                that.$http.get("http://localhost:3000/post/plpost/" + tid)
                          .then(
                          (response)=>{          
                            that.$set(that.pllist[i],'Tz_text',response.data.tzd.Tz_text)
                            that.$set(that.pllist[i],'Tz_type',response.data.tzd.Tz_type)
                            that.$set(that.pllist[i],'Tz_img',response.data.tzd.Tz_img[0])
                          },
                          (error)=>{
                          console.log("err");
                              });
              }
              this.$vux.loading.hide();
          },
          (error)=>{
          console.log("err");
              });
    },
  },
  mounted(){
    this.$vux.loading.show();
    this.getpl();
  },
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
.rline{
text-decoration:none;  /*超链接无下划线*/
color: #000;
}
.flex-demo {//帖子css
  background-color: #f8f6f6;
  width: 100%;
  border-radius: 4px;
  background-clip: padding-box;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  margin-bottom: 5px;
}
.namebox{
  margin-top: 10px;
  display: flex;
  justify-content:space-between;
  align-items:center;
}
.namemsg{
  margin-left: 20px;
  display: flex;
  flex-direction: row;
  justify-content:flex-start;
  width: 70%;
}
.Tname{
  display: flex;
  flex-direction: column;
}
.touxiang{
    background-color: aliceblue;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    margin-right: 20px;
}
.name{
  margin-bottom: 5px;
  width: 200px;
  color: rgb(59, 59, 59);
  font-size: 14px;
  white-space:nowrap; 
  text-overflow:ellipsis;
  overflow:hidden;
}
.time{
  color: rgb(88, 88, 88);
  font-size: 12px;
}
.Title{
margin-left: 20px;
margin-right: 20px;
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;
}
.M_pltz{
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 10px;
  background-color: #e2e2e2;
  border-radius: 10px;
}
.M_pltext{
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  margin-right: 10px;
}
.M_pltitle{
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 1;    
overflow: hidden;
}
.M_pltype{
  color: gray;
  font-size: 14px;
}
.M_to{
  text-decoration:none;  /*超链接无下划线*/
  color:rgb(25, 158, 247);
}
</style>